<template>
  <div class="music-detail-container">
    <div class="bgc-box"></div>
    <!-- 头部 -->
    <Header>
      <router-link to="/index">
        <van-icon name="wap-home-o" size="30px" />
      </router-link>
      <div class="title">
        <div>{{songinfo.title}}</div>
        <div class="author">{{songinfo.author}}</div>
      </div>
      <van-icon name="search" size="30px" />
    </Header>
    <div class="cover">
      <img :src="songinfo.pic_premium" :style="imgStyle" alt />
    </div>
    <!-- 歌词 -->
    <Lrc v-if="songinfo.lrclink" :lrc-link="songinfo.lrclink" />
    <!-- 底部 -->
    <div class="contan">
      <van-icon v-show="!isLike" name="like-o" size="30px" @click="zan(true)" />
      <van-icon v-show="isLike" name="like" size="30px" color="red" @click="zan(false)" />
      <a v-if="songinfo.title" :href="bitrate.file_link" target="_blank" :download="songinfo.title">
        <van-icon name="down" size="30px" />
      </a>
      <!-- <input type="text"> -->
    </div>
    <!-- 播放区 -->
    <div class="audio-box">
      <!-- <audio
        ref="audio"
        @play="handlePlay"
        @pause="handlePause"
        autoplay
        controls
        :src="bitrate.show_link"
      ></audio> -->
    </div>
    <!-- <button @click="audiotime">获取时间</button> -->
<button @click="$store.commit('changePlay',{isPlay:false})">隐藏播放</button>
    <button @click="changeT">修改title</button>
    <div>{{msg123}}</div>
    <div>{{title}}</div>
    <div>{{num}}</div>
  </div>
</template>

<script>
import Lrc from "./components/Lrc";
import { Dialog } from "vant";
// import {getMusicDetail} from "../../api/baidu-music";
import { mapGetters, mapState } from "vuex";
export default {
  name: "MusicDetail",
  components: {
    Lrc,
  },
  data() {
    return {
      // bitrate: {},
      // songinfo: {},
      isLike: false,
      // imgStyle:{
      //   'animation-play-state':'paused'
      // }
    };
  },
  // mounted() {
  //   this.$refs.audio.addEventListener("timeupdate", () => {
  //     // console.log(this.$refs.audio.currentTime);
  //     this.$store.commit('changeCurrentTime',{currentTime:this.$refs.audio.currentTime})
  //   });
  // },
  methods: {
    changeT() {
      // 修改ttile， 需要触发mutation修改
      this.$store.commit("changeTitle", { title: "李白" });
    },
    // handlePlay() {
    //   console.log("播放了");

    //   this.imgStyle={
    //     'animation-play-state':'running'
    //   }
    // },
    // handlePause() {
    //   console.log("暂停");

    //   this.imgStyle={
    //     'animation-play-state':'paused'
    //   }
    // },
    zan(flag) {
      // 调用接口
      if (flag) {
        this.isLike = flag;
      } else {
        Dialog.confirm({
          title: "确定取消吗？",
          message: "您确定要取消点赞吗？",
        })
          .then(() => {
            // on confirm
            this.isLike = flag;
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
  created() {
    //  getMusicDetail(this.$route.params.id).then(res => {
    //             console.log(res)
    //             this.bitrate = res.bitrate;
    //             this.songinfo = res.songinfo;
    //         })
    this.$store.dispatch("initSongInfo", { songId: this.$route.params.id });
  },
  computed: {
    ...mapState({
      msg123: "msg",
      title: "title",
      bitrate: "bitrate",
      songinfo: "songinfo",
      processTime:"processTime",
      imgStyle:'imgStyle'
    }),
    ...mapGetters({
      num: "num",
      // searchList:"searchList"
    }),
    searchList() {
      return this.$store.getters.searchList;
    },
    // num(){
    //     return this.$store.getters.num
    // }
  },
  // watch:{
  //   processTime(){
  //     this.$refs.audio.currentTime = this.processTime
  //   }
  // }
};
</script>

<style lang='less' scoped>
.bgc-box {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #f1f3f4;
  z-index: -1;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .author {
    font-size: 12px;
  }
  .title {
    flex-grow: 1;
    text-align: center;
  }
}
.cover {
  padding: 30px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 60%;
    border-radius: 50%;
    animation: rotate 18s linear infinite;
    animation-play-state:paused;
  }
}


@keyframes rotate{
	0%{
		transform: rotateZ(0deg);/*从0度开始*/
	}
	100%{
		transform: rotateZ(360deg);/*360度结束*/
	}
}




.contan {
  display: flex;
  justify-content: space-between;
}
.audio-box {
  display: flex;
  justify-content: center;
}
</style>